<template>
  <v-container>
    <v-content>chatroom</v-content>
    <v-text-field v-model="currentText"></v-text-field>
    <v-btn color="success" @click="chat">chat</v-btn>
    <v-row>
      <v-list v-model="messages">
        <v-list-item v-for="(msg, i) in messages" :key="i">
          {{ msg }}
        </v-list-item>
      </v-list>
    </v-row>
  </v-container>
</template>
<style></style>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import io from "socket.io";
@Component({})
export default class Chatroom extends Vue {
  currentText = "";
  messages: Array<string> = ["text1", "text2"];
  socket: any | null = null;
  created() {
    this.socket = io("http://localhost:3000");
    this.socket.on("event");
  }
  chat() {
    this.messages.push(this.currentText);
    this.currentText = "";
  }
}
</script>
